<template>
	<view class="outer-container">
		<uni-nav-bar statusBar="true"
			fixed="true"
			backgroundColor="#ffae25"
			color="#fff"
			left-icon="back"
			@clickLeft="toVipMember"
			title="支付完成">
		</uni-nav-bar>
		<view class="bg-container">
			<image class="bg-img"
				src="../../static/img/zhifuwancheng%20_slices/di.png"
				mode=""></image>
			<view class="wancheng-container">
				<image class="wancheng"
					src="../../static/img/zhifuwancheng%20_slices/wancheng.png"
					mode=""></image>

				<text class="payment-tip">支付成功</text>
				<text class="payment-amount">已支付￥45</text>
			</view>

			<view class="circle-container">
				<view class="large-circle">
					<image class="big-circle"
						src="../../static/img/zhifuwancheng%20_slices/zhingjia%20.png"
						mode=""></image>
					<image class="check-img"
						src="../../static/img/zhifuwancheng%20_slices/wanchengtupian%20.png"
						mode=""></image>


				</view>


			</view>


		</view>

		<view class="bottom-content">
			<text>立即分享 领取好礼</text>
			<button type="default" open-type="share" @tap="shareMessage">立即分享</button>
			<button type="default"
				@tap="backHome">返回首页</button>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				innerAudioContext: null,
				amount:0
			}
		},
		onLoad(options) {
			// console.log(options);
			this.amount = options.amount;
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;
			this.innerAudioContext.src = 'https://downsc.chinaz.net/Files/DownLoad/sound1/201803/9897.mp3';
			this.innerAudioContext.onPlay(() => {
			  console.log('开始播放');
			});
			this.innerAudioContext.onError((res) => {
			  console.log(res.errMsg);
			  console.log(res.errCode);
			});
		},
		methods: {
			backHome() {
				this.innerAudioContext.destroy();
				uni.reLaunch({
					url: '/pages/home/home'
				})
			},
			toVipMember(){
				uni.switchTab({
					url: '/pages/vip-member/vip-member'
				})
			}
		},
		onShareAppMessage: () => {
			return {
				title:'我充值了香哈菜谱的会员, 就差你了',
				page:'/pages/payment-successful/payment-successful',
			}
		}
	}
</script>

<style lang="scss"
	scoped>
	.outer-container {
		position: relative;

		uni-nav-bar ::v-deep {
			position: relative;
			z-index: -1;
		}

		.bg-container {
			position: absolute;
			top: 176rpx;
			left: 0;
			width: 100vw;
			z-index: 1000;

			.bg-img {
				width: 100%;
			}

			.wancheng-container {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				top: 20rpx;
				left: 0rpx;
				right: 0;
				bottom: 0;
				margin: 0 auto;
				z-index: 1010;
				width: max-content;
				height: 240rpx;

				.wancheng {
					width: 96rpx;
					height: 96rpx;
				}

				.payment-tip {
					font-size: 36rpx;
					color: #fff;
				}

				.payment-amount {
					font-size: 32rpx;
					color: #ffc37e;
				}
			}

			.circle-container {

				width: 100vw;
				height: 314rpx;
				position: absolute;
				// bottom: 20rpx;
				left: 0rpx;
				right: 0;
				bottom: -120rpx;
				margin: 0 auto;
				z-index: 1010;

				.large-circle {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: 0 auto;
					z-index: 1010;
					width: 100vw;
					height: 314rpx;

					.big-circle {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: 0 auto;
						z-index: 1015;
						width: 314rpx;
						height: 314rpx;
					}

					.check-img {
						position: absolute;
						top: 20rpx;
						left: 0;
						right: 0;
						bottom: 0;
						margin: 0 auto;
						z-index: 1020;
						width: 250rpx;
						height: 250rpx;
					}
				}



			}




		}

		.bottom-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: max-content;
			height: fit-content;
			position: absolute;
			top: 856rpx;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 0 auto;

			text {
				font-size: 40rpx;
				color: #646464;
				margin-bottom: 24rpx;
			}

			button {
				width: 542rpx;
				height: 90rpx;
				background-image: linear-gradient(270deg,
						#ffae25 0%,
						#ff8e1d 100%);
				color: #fff;
				border-radius: 86rpx;
				margin: 24rpx 0;
				border: none;

				&:last-of-type {
					color: #ff921e;
					background-image: none;
					background-color: #fff;
					border: solid 2rpx #ff921e;
				}
			}

		}

	}
</style>
